import { MciSvgIcon, MciTooltip } from '@/components/base';
import { FormMode } from '@/components/base/Form/mode';
import { useCurrentNode } from '@/hooks/useCurrentNode';
import { useFlow } from '@/hooks/useFlow';
import { useGraph } from '@/hooks/useGraph';
import { ElDrawer, ElMessageBox } from 'element-plus';
import { PropType } from 'vue';
import { BaseNodeContent } from '../BaseNode';
import { activeNodeId } from '../BaseNode/state';

export const NodeDrawer = defineComponent({
  props: {
    size: {
      type: [Number, String] as PropType<number | string>,
      default: 800
    },
    direction: {
      type: String as PropType<'rtl' | 'ltr' | 'ttb' | 'btt' | 'rtl'>,
      default: 'btt'
    }
  },
  emits: ['open'],
  setup(props, { slots, emit }) {
    const visible = ref(false);
    const currentNode = useCurrentNode();
    const { flowState } = useFlow();
    const { graph } = useGraph();
    const tempNodeName = ref('');

    const editNodeName = () => {
      ElMessageBox.prompt('请输入节点名称', '修改节点名称', {
        confirmButtonText: '确认修改',
        cancelButtonText: '取消修改',
        inputPattern: /^.+$/,
        inputErrorMessage: '请输入节点名称'
      })
        .then(({ value }) => {
          const node = graph.value?.getCellById(activeNodeId.value);
          node?.getData()?.setNodeData({
            nodeName: value
          });
          node?.setData({
            nodeName: value
          });
          tempNodeName.value = value;
        })
        .catch(() => {});
    };

    watch(visible, (val) => {
      if (val) {
        emit('open');
      }
    });

    return () => {
      return (
        <FormMode mode={flowState.value === 'edit' ? 'edit' : 'view'}>
          {slots.reference?.({
            onClick() {
              visible.value = true;
            }
          })}
          <ElDrawer
            direction={props.direction}
            destroyOnClose
            size={props.size}
            appendToBody
            modelValue={visible.value}
            onClose={() => {
              visible.value = false;
              activeNodeId.value = '';
            }}>
            {{
              header() {
                const headerContent = slots.header?.();
                if (slots.header?.()) {
                  return headerContent;
                }

                const nodeName = currentNode.getNodeData()?.nodeName;
                return (
                  <BaseNodeContent
                    nodeNameEditable
                    nodeName={tempNodeName.value || nodeName}
                    nodeType={currentNode.getNodeType()}>
                    {flowState.value === 'edit' && (
                      <MciTooltip content="修改节点名称" placement="bottom">
                        <MciSvgIcon onClick={editNodeName} name="edit" class="ml-12 cursor-pointer node-name-editable" />
                      </MciTooltip>
                    )}
                  </BaseNodeContent>
                );
              },
              default() {
                return <div class="node-drawer w-90vw mx-auto pt-12">{slots.default?.()}</div>;
              }
            }}
          </ElDrawer>
        </FormMode>
      );
    };
  }
});
